<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>Phong材质</title>
</head>
<body onload="init()">
<script src="../three.min.js"></script>
<script>
  /* 参数
   -----------------------------------------------------------------

   Phong模型考虑了镜面反射的效果，因此对于金属、镜面的表现尤为适合

   new THREE.MeshPhongMaterial({
    color: 0xffff00
   });

   color 是用来表现材质对散射光的反射能力，
   也是最常用来设置材质颜色的属性。
   除此之外，还可以用 ambient 和 emissive 控制材质的颜色。
   specular 值指定镜面反射系数

   其光照模型公式为：
   Ispecular = Ks * Is * (cos(alpha)) ^ n

   Idiffuse 是镜面反射的光强
   Ks 是材质表面镜面反射系数，
   Is 是光强，
   alpha 是反射光与视线的夹角
   n 是高光指数，越大则高光光斑越小

   -----------------------------------------------------------------
   */

  function init() {
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(400, 300);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x000000)

    let scene = new THREE.Scene();

    let camera = new THREE.PerspectiveCamera(50, 400 / 300, 1, 10)
    camera.position.set(3, 3, 5);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(-5, 10, 5);
    scene.add(light);

    let cube = new THREE.Mesh(
//        new THREE.CubeGeometry(2, 2, 2),
        new THREE.SphereGeometry(2, 22, 22),
        new THREE.MeshPhongMaterial({
          color: 0xff0000,
          specular: 0xff0000,
          shininess: 600
        })
    );
    scene.add(cube);

    renderer.render(scene, camera);
  }
</script>
</body>
</html>